<template>
  <div class="box">
    <Header head_text="编辑资料" />
    <div class="imsage">
      <img v-if="ruserinfo.head_img" :src="$axios.defaults.baseURL+ ruserinfo.head_img" />
      <img v-else src="@/assets/logo.png" />
      <van-uploader :after-read="urlimg" class="setimg" />
    </div>
    <Strip val="呢称" :text="ruserinfo.nickname" @barClick="nickname=true" />
    <Strip val="密码" text="*****" @barClick="password=true" />
    <Strip val="性别" :text="ruserinfo.gender==1?'男':'女'" @barClick="isgenders=true" />

    <!-- 放置弹窗 -->

    <!-- 呢称弹窗 -->
    <van-dialog
      v-model="nickname"
      title="更改呢称"
      show-cancel-button
      @confirm="editProfime({nickname:newnickname})"
    >
      <van-field v-model="newnickname" placeholder="请输入5到11个字符的呢称" />
    </van-dialog>

    <!-- 密码弹窗 -->
    <van-dialog
      v-model="password"
      title="更改密码"
      show-cancel-button
      @confirm="editProfime({password:newpassword})"
    >
      <van-field v-model="newpassword" placeholder="请输入3位数密码" />
    </van-dialog>

    <!-- 性别弹窗 -->
    <van-action-sheet
      v-model="isgenders"
      :actions="genders"
      @select="setgender"
      cancel-text="我不想改性了"
    />
  </div>
</template>

<script>
import Strip from "@/components/Strip";
import Header from "@/components/Header";
export default {
  components: {
    Strip,
    Header
  },
  data() {
    return {
      nickname: false,
      password: false,
      isgenders: false,
      newnickname: "",
      ruserinfo: "",
      newpassword: "",
      genders: [
        {
          name: "男",
          gender: 1
        },
        {
          name: "女",
          gender: 0
        }
      ]
    };
  },

  created() {
    this.logpage();
  },
  //实现信息修改
  methods: {
    logpage() {
      this.$axios({
        url: "user/" + localStorage.getItem("id"),
        method: "get"
        //headers: { Authorization: "Bearer " + localStorage.getItem("token") }
      }).then(res => {
        const { message, data } = res.data;
        if (message == "获取成功") {
          this.ruserinfo = data;
        }
      });
    },
    // 页面刷新
    editProfime(newdata) {
      this.$axios({
        url: "user_update/" + localStorage.getItem("id"),
        method: "post",
        data: newdata
        // headers: { Authorization: "Bearer " + localStorage.getItem("token") }
      }).then(res => {
        if (res.data.message == "修改成功") {
          //   this.ruserinfo.value = this.newvalue;
          this.logpage();
        }
      });
    },

    // 更改性别
    setgender(item) {
      const gerdenobj = {
        gender: item.gender
      };
      this.editProfime(gerdenobj);
      this.isgenders = false;
    },

    //上传头像
    urlimg(fileObj) {
      const data = new FormData();
      data.append("file", fileObj.file);
      this.$axios({
        url: "/upload",
        method: "post",
        data: data
        //headers: { Authorization: localStorage.getItem("token") }
      }).then(res => {
        const { message, data } = res.data;
        if (message == "文件上传成功") {
          this.editProfime({
            head_img: data.url
          });
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  .imsage {
    text-align: center;
    position: relative;
    img {
      width: 19.444vw;
      height: 19.444vw;
      margin-top: 11.111vw;
      margin-bottom: 5.556vw;
      border-radius: 5.556vw;
    }
    .setimg {
      position: absolute;
      bottom: 10px;
      left: 150px;
      opacity: 0;
    }
  }
}
</style>